<template>
  <div class="box">
    <div class="header">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()"/>
      </template>
      <template #action>
        <div @click="onSearch" class="search">搜索</div>
      </template>
    </van-search>
    </div>
    <div class="content">
        <div class="recentSearch" v-if="recentSearchFlag">
            <h3>最近搜索<span @click="deleData">清空</span></h3>
            <van-tag color="#F0F2F5" v-for="item of standbyList" :key="item" @click="resuList(item)">{{item}}</van-tag>
        </div>
        <div class="hotSearch">
            <h3>热门搜索
              <span @click="conceal" v-if="hotSearchFlag">隐藏</span>
              <span @click="conceal" v-else>显示</span>
              </h3>
            <div v-if="hotSearchFlag">
              <van-tag color="#F0F2F5" v-for="item of hotwordList" :key="item.wordid" @click="resuList(item.keyword)">{{item.keyword}}</van-tag>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, Icon, Tag, Toast } from 'vant'
import { getHotword } from '@/api/search'

Vue.use(Search)
Vue.use(Icon)
Vue.use(Tag)
Vue.use(Toast)
export default {
  data () {
    return {
      keyword: '',
      hotwordList: [],
      recentSearchList: [],
      standbyList: [],
      recentSearchFlag: '',
      hotSearchFlag: ''
    }
  },
  mounted () {
    this.getHotword()
    // 定义最近搜索状态
    this.standbyList = JSON.parse(localStorage.getItem('search')) || []
    if (this.standbyList.length > 0) {
      this.recentSearchFlag = true
    } else {
      this.recentSearchFlag = false
    }
  },
  methods: {
    // 热门搜索关键词
    async getHotword () {
      var res = await getHotword()
      if (res.data.code === '200') {
        this.hotwordList = res.data.data.filter(item => {
          if (!(item.keyword === '') && !(item.keyword === undefined)) {
            return item
          }
        })
        // 热门搜索状态
        if (this.hotwordList.length > 0) {
          this.hotSearchFlag = true
        } else {
          this.hotSearchFlag = false
        }
      }
    },
    // 搜索按钮跳转
    onSearch () {
      if (this.keyword) {
        this.$router.push({ path: '/searchResult?keyword=' + this.keyword })
        this.recentSearchList.push(this.keyword)
      } else {
        Toast('搜索框为空')
      }
    },
    // 最近搜索，热门搜索跳转
    resuList (keyword) {
      this.$router.push({ path: '/searchResult?keyword=' + keyword })
    },
    // 清空最近搜索
    deleData () {
      localStorage.removeItem('search')
      this.standbyList = JSON.parse(localStorage.getItem('search')) || []
      if (this.standbyList.length > 0) {
        this.recentSearchFlag = true
      } else {
        this.recentSearchFlag = false
      }
    },
    // 改变热门搜索状态
    conceal () {
      this.hotSearchFlag = !this.hotSearchFlag
    }
  }
}
</script>
<style lang="stylus" scoped>
.van-search
  padding 5px 12px
.van-search__content
  margin-left 22px
h3
  position relative
  span
    position: absolute
    right: 10px
    top 5px
    font-weight: normal
    font-size: 12px
.hotSearch,.recentSearch
  padding: 10px
 .van-tag
  display: inline-block
  line-height: 20px
  text-align: center
  height 20px
  padding 5px
  padding-left: 10px
  padding-right: 10px
  margin: 5px
  color #333
.search
  display: inline-block
  background-color: #E93B3D
  height: 30px
  width: 50px
  text-align: center
  line-height: 30px
  border-radius: 5px
  color: #fff
  margin-left: 25px
</style>
